import get from "lodash/get";
import isString from "lodash/isString";

// Register a global custom directive called v-focus
function AttachPlacehoder(element, placeholder = "sds", style = "") {
    if (element.classList.contains(".aui-form-placeholder")) {
        element.append(`<div class='aui-form-placeholder' style="${style}"><div class="aui-form-placeholder__inner">${placeholder}</div></div>`);
    }
}

function setEmpty(s) {
    var parentNode = s.element.parentNode;
    if (parentNode) {
        if (!parentNode.classList.contains("empty")) {
            parentNode.classList.add("empty")
        }
        if (!s.element.classList.contains("empty")) {
            s.element.classList.add("empty")
        }
        if (s.element.classList.contains("not-empty")) {
            s.element.classList.remove("not-empty")
        }
    }
}

function setUnEmpty(s) {
    var parentNode = s.element.parentNode;
    if (parentNode) {
        if (parentNode.classList.contains("is-empty")) {
            parentNode.classList.remove("is-empty")
        }
        if (s.element.classList.contains("is-empty")) {
            s.element.classList.remove("is-empty")
        }
        if (!s.element.classList.contains("is-not-empty")) {
            s.element.classList.add("is-not-empty")
        }
    }
}

Vue.directive('input-validate', {
    bind: function (el, binding, vnode) {
        var s = get(vnode.context, binding.expression);
        if (s) {
            s.element = el;
            s.isValidateError = false;
            s.dirty = false;
            if (isString(el.value) && el.value.length < 1) {
                setEmpty(s);
            } else {
                setUnEmpty(s);
            }
            s.onEmpty = function () {
                setEmpty(s);
            };
            s.onUnEmpty = function () {
                setUnEmpty(s);
            };
            s.onChange = function () {
                var parentNode = s.element.parentNode;
                if (!s.dirty) {
                    s.dirty = true;
                    if (!parentNode.classList.contains("is-dirty")) {
                        parentNode.classList.add("is-dirty")
                    }
                    if (!s.element.classList.contains("is-dirty")) {
                        s.element.classList.add("is-dirty")
                    }
                }
            };
            s.onValidateError = function () {
                var parentNode = s.element.parentNode;
                if (!parentNode.classList.contains("is-error")) {
                    parentNode.classList.add("is-error")
                }
                if (parentNode.classList.contains("is-success")) {
                    parentNode.classList.remove("is-success")
                }
                if (!s.element.classList.contains("is-invalid")) {
                    s.element.classList.add("is-invalid")
                }
                if (s.element.classList.contains("is-valid")) {
                    s.element.classList.remove("is-valid")
                }
            };
            s.onValidateSuccess = function () {
                var parentNode = s.element.parentNode;
                if (!parentNode.classList.contains("is-success")) {
                    parentNode.classList.add("is-success")
                }
                if (parentNode.classList.contains("is-error")) {
                    parentNode.classList.remove("is-error")
                }
                if (s.element.classList.contains("is-invalid")) {
                    s.element.classList.remove("is-invalid")
                }
                if (!s.element.classList.contains("is-valid")) {
                    s.element.classList.add("is-valid")
                }
            };
            s.reset = function () {
                var parentNode = s.element.parentNode;
                s.dirty = false;
                if (parentNode.classList.contains("is-success")) {
                    parentNode.classList.remove("is-success")
                }
                if (parentNode.classList.contains("is-error")) {
                    parentNode.classList.remove("is-error")
                }
                // if (parentNode.classList.contains("is-dirty")) {
                //     parentNode.classList.remove("is-dirty")
                // }
                if (s.element.classList.contains("is-dirty")) {
                    s.element.classList.remove("is-dirty")
                }
                if (s.element.classList.contains("is-valid")) {
                    s.element.classList.remove("is-valid")
                }
                if (s.element.classList.contains("is-invalid")) {
                    s.element.classList.remove("is-invalid")
                }
            };
            s.el = el;
        }
    },
    // When the bound element is inserted into the DOM...
    inserted: function (el) {
        // Focus the element
        // var parentNode = $(el.parentNode);
        // var paddingleft = parentNode.css("padding-left");
        // var elpl = $(el).css("padding-left");
        // if (el.type) {
        //     if (el.type === "text" || el.type === "password") {
        //         // AttachPlacehoder($(el.parentNode), el.getAttribute("placeholder"), `left: calc(${paddingleft} + ${elpl})`);
        //     }
        // }
    }
});